<template>
    <div id="home">
        <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
        <tab-control :titles="['流行','新款','精选']" 
                     @tabClick="tabClick"
                    ref="tabControl1" class="tab-control" v-show="isTabFixed"/>
        <scroll class="content" ref="scroll" :probe-type="3"
                @scroll="contentScroll"
                @pullingUp="loadMore"
                 :pull-up-load="true">
                <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"/>
                <recommend-view :recommends="recommends"/>
                <feature-view/>
                <tab-control :titles="['流行','新款','精选']" 
                            @tabClick="tabClick"
                            ref="tabControl2" />
                 <goods-list :goods="goods[currentType].list"/>
        </scroll>
        <back-top @click.native="backClick" v-show="isShowBackTop"/>
     
    </div>

</template>

<script>

import HomeSwiper from './childComps/HomeSwiper.vue'
import RecommendView from './childComps/RecommendView.vue'
import FeatureView from './childComps/FeatureView.vue'

import NavBar from 'components/common/navbar/NavBar.vue'
import TabControl from 'components/content/tabControl/TabControl.vue'
import GoodsList from 'components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll.vue'
import BackTop from 'components/content/backTop/BackTop'

import {getHomeMutidata,getHomeGoods} from "network/home.js"
import {debounce} from "common/utils"






export default {
    name:"Home",
    components:{
        
        HomeSwiper,
        RecommendView,
        FeatureView,
        NavBar,
        TabControl,
        GoodsList,
        Scroll,
        BackTop,
   
  
      
      
       
    },
    data(){
        return{
            banners:[],
            recommends:[],
            goods:{
                'pop':{page:0,list:[]},
                'new':{page:0,list:[]},
                'sell':{page:0,list:[]},
            },
            currentType:'pop',
            isShowBackTop:true,
            tabOffsetTop:0,
            isTabFixed:false,
            saveY:0,
        }
    },
    created(){
        this.getHomeMutidata();
        this.getHomeGoods('pop');
        this.getHomeGoods('new');
        this.getHomeGoods('sell');

       
       
    },
    mounted(){

        const refresh = debounce(this.$refs.scroll.refresh,50)
         this.$bus.$on('itemImageLoad',()=>{
            refresh()
           
        })
     
    },
    activated(){
        this.$refs.scroll.scrollTo(0,this.saveY,100)
        this.$refs.scroll.refresh()
    },
    deactivated(){
        this.saveY = this.$refs.scroll.getScrollY()
    },
    computed:{
            showGoods(){
            return this.goods[this.currentType].list
        },
    },
    methods:{
       

        //事件监听相关的方法
        tabClick(index){
           switch(index){
                case 0:
                   this.currentType = 'pop'
                   break
                case 1:
                   this.currentType = 'new'
                   break
                case 2:
                   this.currentType = 'sell'
                   break

           }
           this.$refs.tabControl1.currentIndex = index
           this.$refs.tabControl2.currentIndex = index
        },
        loadMore(){
            this.getHomeGoods(this.currentType)
          
        },

        swiperImageLoad(){
           this.tabOffsetTop =  this.$refs.tabControl2.$el.offsetTop
        },
       
        //网络请求相关的方法
        getHomeMutidata(){
            getHomeMutidata().then(res=>{
            // console.log(res);
            this.banners = res.data.banner.list;
            this.recommends = res.data.recommend.list;
        })
        },
         getHomeGoods(type){
            const page = this.goods[type].page+1
            getHomeGoods(type,page).then(res=>{
                this.goods[type].list.push(...res.data.list);
                this.goods[type].page +=1
                this.$refs.scroll.finishPullUp()
            })
         },
         backClick(){
             this.$refs.scroll.scrollTo(0,0,500)
         },
         contentScroll(position){
             //1判断backtop是否显示
             this.isShowBackTop = -position.y > 1000
             //2决定tabControl是否吸顶
             this.isTabFixed = (-position.y) > this.tabOffsetTop
         }

    }
}
        NavBar
</script>

<style scoped>

   #home {
    height: 100vh;
    position: relative;
  }

  .home-nav {
    background-color: var(--color-tint);
    color: #fff;
    position: relative;
    z-index: 9;
  }

  .tab-control {
    position: relative;
    z-index: 9;
  }

  .content {
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }
</style>